<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="never">
    <meta http-equiv="expires" content="2626560">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <title>Document</title>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
        }

        #map {
            height: 100vh;
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
        }

        #h5 {
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;
        }
    </style>
</head>

<body>
    <h5 id="h5">获取的token</h5>
    <div id="map"></div>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
         L.TileLayer.zsYunYao=L.TileLayer.extend({getTileUrl:function(e){return L.Util.template(this._url,{x:e.x,y:e.y,z:e.z})},createTile:function(e,t){const n=document.createElement("img");n.onload=(()=>t(null,n)),n.onerror=(()=>t(null,n));const r=this.getTileUrl(e),o=new XMLHttpRequest;return o.responseType="blob",o.addEventListener("loadend",function(){const e=this.response;e&&e.size>101?n.src=URL.createObjectURL(e):(console.error("Tile load error: empty tile received",r),t(null,n))}),o.addEventListener("error",function(){console.error("Tile request error:",r),t(null,n)}),o.open("GET",r),o.setRequestHeader("x-gistack-token",this.options.tokens[0]),o.setRequestHeader("security-token",this.options.tokens[1]),o.send(),n}});
    </script>
    <script>
        const L = window.L;
        $(() => {
            const h5 = document.getElementById('h5');
            axios.post('https://www.img.net/access/rest/services/token?username=hnssthjt&password=wxyy@20200827')
                .then(res => {
                    h5.innerHTML = `获取的token:${JSON.stringify(res.data)}`;
                    initMap(res.data);
                });

            const initMap = (datas) => {
                const map = L.map('map');
                const tileUrl = 'https://img.net/access/rest/services/MosaicMap_2022_05M/Transfer?style=default&tilematrixset=EPSG%3A3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fwebp&TileMatrix={z}&TileCol={x}&TileRow={y}';
                const wmtsLayer = new L.TileLayer.zsYunYao(tileUrl, {
                    attribution: '&copy; <a href="https://img.net">WMTS Server</a>',
                    tileSize: 256,
                    minZoom: 0,
                    maxZoom: 19,
                    tokens: [datas['x-gistack-token'], datas['security-token']]
                });
                wmtsLayer.addTo(map);
                map.setView([27.565028, 112.035228], 8);
            };
        });
    </script>
</body>

</html>